
<%@page import="com.dilean.api.dao.PersonDAO"%>
<%@page import="com.dilean.impl.model.PersonImpl"%>
<%@page import="com.dilean.api.model.Person"%>
<%@page import="java.util.Iterator"%>
<%@page import="com.dilean.spring.AplicationContextHolder"%>
<%@page import="com.dilean.api.dao.ConversationDAO"%>
<%@page import="com.dilean.api.model.Message"%>
<%@page import="java.util.Collection"%>
<%@page import="java.util.Collection"%>
<%@taglib prefix="sec"  uri="http://www.springframework.org/security/tags"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@page contentType="text/html" pageEncoding="UTF-8"%>

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Chat &middot; Dilean</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="description" content="">
        <meta name="author" content="">
        <style>
            .chat
            {
                list-style: none;
                margin: 0;
                padding: 0;
            }
            .chat li
            {
                margin-bottom: 10px;
                padding-bottom: 5px;
                border-bottom: 1px dotted #B3A9A9;
            }
            .chat li.left .chat-body
            {
                margin-left: 60px;
            }
            .chat li.right .chat-body
            {
                margin-right: 60px;
            }
            .chat li .chat-body p
            {
                margin: 0;
                color: #777777;
            }
            .panel .slidedown .glyphicon, .chat .glyphicon
            {
                margin-right: 5px;
            }
            .panel-body
            {
                overflow-y: scroll;
                height: 550px;
            }
            ::-webkit-scrollbar-track
            {
                -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
                background-color: #F5F5F5;
            }
            ::-webkit-scrollbar
            {
                width: 12px;
                background-color: #F5F5F5;
            }
            ::-webkit-scrollbar-thumb
            {
                -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
                background-color: #555;
            }
        </style>
        <link href="resources/mytheme/css/bootstrap.min.css" rel="stylesheet">
        <link href="resources/mytheme/css/simple-sidebar.css" rel="stylesheet">
        <link href="resources/mytheme/css/font-awesome.css" rel="stylesheet">
        <link href="resources/mytheme/css/font-awesome.min.css" rel="stylesheet">
    </head>
    <body>
        <%
            final int convId = Integer.parseInt(request.getParameter("con"));

            Collection<Message> messages = AplicationContextHolder.getInstance().getContext().getBean(ConversationDAO.class).findByIdWithMessages(convId).getMessages();

            int id = 1;
            Person me = new PersonImpl();
            me = AplicationContextHolder.getInstance().getContext().getBean(PersonDAO.class).findByIdWithFriends(id);
            Collection<Person> friendRequests = me.getFriendRequests();
            Collection<Person> friends = me.getFriends();
            int numberRequest = 0;
            for (Person fr : friendRequests) {
                if (friends.contains(fr) == false) {
                    numberRequest++;
                }
            }


        %>


        <div id="wrapper">

            <!-- Sidebar -->
            <div id="sidebar-wrapper">
                <ul class="sidebar-nav">
                    <li class="sidebar-brand">
                        <a href="http://localhost:8080/Dilean/myPage.jsp">
                            <h2 align="centre" >Dilean</h2>
                        </a>
                    </li>
                    <li>
                        <a href="http://localhost:8080/Dilean/myPage.jsp"><i class="fa fa-home fa-fw-5x"></i>&nbsp; My Page</a>
                    </li>
                    <li>
                        <a href="http://localhost:8080/Dilean/friends.jsp?id=1"><i class="fa fa-users"></i>&nbsp; Friends </a>
                    </li>

                    <li>
                        <a href="http://localhost:8080/Dilean/allUsers.jsp?id=1"><i class="fa fa-database"></i>&nbsp; Users 
                            <%                                if (numberRequest != 0) {
                            %>
                            <span class="badge badge-info"><%=numberRequest%> </span>
                            <%
                                }
                            %>
                        </a>
                    </li>



                    <li>
                        <a href="http://localhost:8080/Dilean/conversation.jsp"><i class="fa fa-envelope"></i>&nbsp; Messages </a>
                    </li>
                    <li class="divider"></li>
                    <li>
                        <a href="http://localhost:8080/Dilean/editUser.jsp?id=1"><i class="fa fa-cog"></i>&nbsp; Settings</a>
                    </li>
                    <li>
                        <a href="#"><i class="fa fa-book"></i>&nbsp; About</a>
                    </li>
                    <li>
                        <a href="#"><i class="fa fa-sign-out"></i>&nbsp; LogOut</a>
                    </li>

                </ul>
            </div>
            <div id="page-content-wrapper">
                <div class="container-fluid">
                    <div class="row">
                        <div class="col-lg-12">
                            <a class="btn btn-large btn-primary" href="#menu-toggle" id="menu-toggle" >
                                <i class="fa fa-user fa-3x"></i> <h4>User Menu</h4></a>
                            <br>
                            <br>
                            <br>




                            <div class="container">
                                <div class="row">
                                    <div class="col-md-7">
                                        <div class="panel panel-primary">
                                            <div class="panel-heading">
                                                <span class="glyphicon glyphicon-comment"></span> Chat

                                            </div>
                                            <div class="panel-body" >
                                                <ul class="chat">

                                                    <%  for (Message mess : messages) {

                                                            if (mess.getSender().getId() == id) {


                                                    %>


                                                    <!--my-->

                                                    <li class="right clearfix"><span class="chat-img pull-right">
                                                            <img src="http://placehold.it/50/FA6F57/fff&text=ME" alt="User Avatar" class="img-circle" />
                                                        </span>
                                                        <div class="chat-body clearfix">
                                                            <div class="header">
                                                                <small class=" text-muted"><span class="glyphicon glyphicon-time"></span><%=mess.getDateStr()%></small>
                                                                <strong class="pull-right primary-font"><a href="http://localhost:8080/Dilean/friend.jsp?id=<%= mess.getSender().getId()%>"><%=mess.getSender().getName()%></a></strong>
                                                            </div>

                                                            <p>

                                                            <h5><%=mess.getData()%></h5>
                                                            </p>
                                                        </div>
                                                    </li>

                                                    <%
                                                    } else {
                                                    %>

                                                    <li class="left clearfix"><span class="chat-img pull-left">
                                                            <img src="http://placehold.it/50/55C1E7/fff&text=U" alt="User Avatar" class="img-circle" />
                                                        </span>
                                                        <div class="chat-body clearfix">
                                                            <div class="header">
                                                                <strong class="primary-font"><a href="http://localhost:8080/Dilean/friend.jsp?id=<%= mess.getSender().getId()%>"><%=mess.getSender().getName()%></a></strong> <small class="pull-right text-muted">
                                                                    <span class="glyphicon glyphicon-time"></span><%=mess.getDateStr()%></small>
                                                            </div>
                                                            <p>
                                                            <h5>
                                                                <%=mess.getData()%>
                                                            </h5>
                                                            </p>
                                                        </div>
                                                    </li>




                                                    <%
                                                            }
                                                        }
                                                    %>

                                                </ul>




                                            </div>
                                            <div class="panel-footer">
                                                <div class="input-group">
                                                    <input id="btn-input" type="text" class="form-control input-sm" placeholder="Type your message here..." />
                                                    <span class="input-group-btn">
                                                        <button class="btn btn-warning btn-sm" id="btn-chat">
                                                            Send</button>
                                                    </span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>




                        </div>
                        <!-- /#wrapper -->

                        <!-- jQuery Version 1.11.0 -->
                        <script src="resources/mytheme/js/jquery-1.11.0.js"></script>

                        <!-- Bootstrap Core JavaScript -->
                        <script src="resources/mytheme/js/bootstrap.min.js"></script>

                        <!-- Menu Toggle Script -->
                        <script>
                            $("#menu-toggle").click(function(e) {
                                e.preventDefault();
                                $("#wrapper").toggleClass("toggled");
                            });

                            $(document).ready(function() {
                                var panels = $('.user-infos');
                                var panelsButton = $('.dropdown-user');
                                panels.hide();

                                //Click dropdown
                                panelsButton.click(function() {
                                    //get data-for attribute
                                    var dataFor = $(this).attr('data-for');
                                    var idFor = $(dataFor);

                                    //current button
                                    var currentButton = $(this);
                                    idFor.slideToggle(400, function() {
                                        //Completed slidetoggle
                                        if (idFor.is(':visible'))
                                        {
                                            currentButton.html('<i class="glyphicon glyphicon-chevron-up text-muted"></i>');
                                        }
                                        else
                                        {
                                            currentButton.html('<i class="glyphicon glyphicon-chevron-down text-muted"></i>');
                                        }
                                    })
                                });


                                $('[data-toggle="tooltip"]').tooltip();

                                $('button').click(function(e) {
                                    e.preventDefault();
                                    alert("This is a demo.\n :-)");
                                });
                            });
                        </script>
                    </div>
                </div>
            </div>
        </div>

    </body>
</html>
